<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的map方法</title>
</head>
<body>
    <h1>数组的map方法</h1>

    <script>
        // map方法的基本用法
        const arr = [1, 2, 3];
        const result = arr.map(x => x * 2);
        console.log(result); // [2, 4, 6]

        // map方法对空位的处理
        const arr2 = [1, , 3];
        const result2 = arr2.map(x => x * 2);
        console.log(result2); // [2, empty, 6]

        // map方法的回调函数
        const arr3 = ['a', 'b', 'c'];
        arr3.map((elem, index, array) => {
            console.log({
                elem,   // 当前元素
                index,  // 当前索引
                array   // 原数组
            });
            return elem.toUpperCase();
        });

        // map方法的this绑定
        const obj = { multiplier: 2 };
        const result3 = [1, 2, 3].map(function(x) {
            return x * this.multiplier;
        }, obj);
        console.log(result3); // [2, 4, 6]

        // 实际应用示例
        // 对象数组转换
        const users = [
            { name: '张三', age: 20 },
            { name: '李四', age: 25 },
            { name: '王五', age: 30 }
        ];

        const names = users.map(user => user.name);
        console.log(names); // ['张三', '李四', '王五']

        // 数据格式化
        const timestamps = [1612345678, 1612445678, 1612545678];
        const dates = timestamps.map(ts => new Date(ts * 1000).toLocaleString());
        console.log(dates);
    </script>
</body>
</html>  